
Ext.BLANK_IMAGE_URL = 'images/default/s.gif';

//------------------------------------------------------------------------------
pulse.tabPanel = new Ext.TabPanel
({
    region:'center',
    deferredRender:false,
    activeTab:0,
    //autoTabs:true,
    //applyTo:'MyBody',
    
    items:[{
        contentEl:'center1',
        title: 'Close Me',
        closable:true,
        autoScroll:true
    },{
        contentEl:'center2',
        title: 'Center Panel',
        closable:true,
        autoScroll:true
    }],
    plugins: new Ext.ux.ContentTabContextMenu()
});

//------------------------------------------------------------------------------
pulse.WorkspaceLoader = Ext.extend( Ext.ux.XmlTreeLoader, 
{
  processAttributes : function( attr )
  {
    if ( attr.tagName == "project" )
    {
      attr.text = attr.path;
      
      attr.iconCls = 'author-m';
      attr.loaded = true;
      //attr.expanded = true;
    }
  }
});


//------------------------------------------------------------------------------
/** Data structure that is used to save the tab main information during its loading */
function LoadingTabData( tabId, filePath )
{
  this.tabId = tabId;
  this.filePath = filePath;
}

//------------------------------------------------------------------------------
/** Used to manage all the current loading tabs. When a loading tab is completed, its data is updated 
and the LoadingTabData is removed from the list */
function TabLoader()
{
  this.tabs = [];
}
TabLoader.prototype = 
{
  add : function( loadingTabData )
  {
    this.tabs.push( loadingTabData );
  },
  remove : function( loadingTabData )
  {
    var index = this.tabs.indexOf( loadingTabData );
    this.tabs.splice( index, 1 );
  },
  
  decorateTitle : function( sTitle )
  {
  	return '<font size="1px">' + sTitle + '</font>';
  },
  
  /*<li><b>el</b> : Ext.Element<p class="sub-desc">The Element being updated.</p></li>
     * <li><b>success</b> : Boolean<p class="sub-desc">True for success, false for failure.</p></li>
     * <li><b>response</b> : XMLHttpRequest<p class="sub-desc">The XMLHttpRequest which processed the update.</p></li>
     * <li><b>options</b> : Object<p class="sub-desc">The config object passed to the update call.</p></li></ul>*/
  onDataCompleted : function( el, success, response, options )
  {
    // the scope is the corresponding LoadingTabData
    var newTab = pulse.tabPanel.getItem( this.tabId );
    newTab.setTitle( pulse.tabLoader.decorateTitle( this.filePath ) );
    pulse.tabLoader.remove( this );
  }
}

pulse.tabLoader = new TabLoader();

//------------------------------------------------------------------------------
function createWorkspaceTree()
{
  var workspaceTree = new Ext.tree.TreePanel({
        el:'WorkspacePanel',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,        
        rootVisible: false,
        root: new Ext.tree.AsyncTreeNode(),
        loader : new pulse.WorkspaceLoader({ dataUrl:'content/default.workspace.xml' })
        /*listeners: 
        {
          'render': function(tp)
          {
            tp.getSelectionModel().on('selectionChange', function(tree, node)
            {
              if ( node.attributes.tagName == "file" )
                loadContent( node.attributes.text );
            })
          }
	      }*/
    });
    workspaceTree.render();
    workspaceTree.getRootNode().expand();
}

//------------------------------------------------------------------------------
function createViewport()
{
  // We register the output stream
  pulse.htmlElementForOutputStream = document.getElementById( 'south' );
  
  // North
  var northComp = new Ext.BoxComponent
  ({ // raw
    region:'north',
    el: 'north',
    height:32
  });
  
  // South
  var southComp = 
  {
    region:'south',
    contentEl: 'south',
    split:true,
    height: 100,
    minSize: 100,
    maxSize: 200,
    collapsible: true,
    title:'Output',
    margins:'0 0 0 0'
    /*xtype : 'panel',
    listeners:
	{
      contextmenu : function()
      {
      	alert( 'context' );
      }
    }*/
  };
  
  // West
  var westComp = 
  {
    region:'west',
    id:'west-panel',
    title:'Manager',
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    margins:'0 0 0 5',
    layout:'accordion',
    layoutConfig:{
        animate:true
    },
    items: [{
        contentEl: 'ProjectPanel',
        title:'Project',
        border:false,
        iconCls:'nav'
    },{
        contentEl: 'WorkspacePanel',
        title:'Workspace',
        border:false,
        iconCls:'settings'
    },
    {
        contentEl: 'MetaPanel',
        title:'Meta files',
        border:false,
        iconCls:'settings'
    },
    {
        contentEl: 'TrashPanel',
        title:'Trash',
        border:false,
        iconCls:'iconTrashEmpty'
    }]
  };
  
  new Ext.Viewport({
      layout:'border',
      items:[
          northComp,
          southComp,
          westComp,
          pulse.tabPanel
       ]
  });
  
  var menuDebug = new Ext.menu.Menu({
        id: 'menuDebug',
        items: [
            {
                text: 'Last server response',
                handler: function( item )
                {
                	alert( pulse.server._lastServerResponseXMLData );
                }
            },
            {
            	text: 'Ext debug',
            	handler: function( item ) { Ext.log('Ext debug opened.'); }
            }
        ]
    });
  
  var oToolbar = new Ext.Toolbar();
    oToolbar.render( 'Toolbar' );
  oToolbar.add({
      text:'Debug',
      iconCls: 'bmenu',
      menu: menuDebug
  }); 
}

//------------------------------------------------------------------------------
Ext.onReady(function()
{
  // NOTE: This is an example showing simple state management. During development,
  // it is generally best to disable state management as dynamically-generated ids
  // can change across page loads, leading to unpredictable results.  The developer
  // should ensure that stable state ids are set for stateful components in real apps.
  Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
  createViewport();
  pulse.project.createProjectTree();
  createWorkspaceTree();
  
  //pulse.image.TooltipPreview( 'test/test.jpg');
} );

